<template>
    <div v-transfer-dom>
        <popup v-model="propShow"
               width="100%"
               @on-hide="propHide">
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>履职描述</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                </div>
                <div>
                    <textarea placeholder="请填写履职描述"
                              v-model="item.description"></textarea>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <label>照片</label>
                    <span>当前共{{item.uploadLength}}张照片</span>
                </div>
                <div class="upload-wrap">
                    <upload v-if="propShow"
                            @setFormData="setFormData"
                            :uploadImgFormData="item.uploadImgFormData"
                            :uploadImgss="item.uploadImgs"
                            :images="item.images"
                            :newBlobList="item.newBlobList">
                    </upload>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>时间</label>
                </div>
                <div>
                    <p>{{item.resumptionTime}}</p>
                </div>
            </div>
            <div class="btns">
                <button style="background:#b2b2b2;"
                        @click="propShow = false">取消</button>
                <button @click="cancel">确定</button>
            </div>
        </popup>
    </div>
</template>
<script>
import upload from '@/commonComponents/upload/index'
import { TransferDom, Popup } from 'vux'
export default {
    name: 'addRecordItem',
    directives: {
        TransferDom
    },
    components: {
        upload,
        Popup
    },
    data () {
        return {
            propShow: false,
            time: '',
            item: {// 工作内容集合
                'description': '', // 履职描述
                'ID': new Date().getTime(), // 工作内容id
                'isAuto': 0,
                'parentId': '',
                'resumptionTime': '', // 记录时间
                'uploadImgFormData': null,
                'uploadImgs': [],
                'newBlobList': [],
                'imgList': [],
                'images': [],
                'uploadLength': 0
            }
        }
    },
    created () {
        this.item.resumptionTime = this.getCurrentTime()
    },
    props: {
        recordItemPropShow: {
            type: Boolean,
            default: false
        },
        addItemFn: {
            default: () => { }
        },
        initialData: {
            default: {}
        },
        formData: {}
    },
    watch: {
        recordItemPropShow (newVal) {
            this.propShow = newVal
            this.item = {// 工作内容集合
                'description': '', // 履职描述
                'ID': new Date().getTime(), // 工作内容id
                'isAuto': 0,
                'parentId': '',
                'resumptionTime': this.getCurrentTime(), // 记录时间
                'uploadImgFormData': null,
                'uploadLength': 0,
                'imgList': []
            }
        },
        initialData (newVal) {
            if (newVal) {
                this.item = JSON.parse(JSON.stringify(newVal))
                this.item.uploadImgFormData = newVal.uploadImgFormData
            }
        }
    },
    methods: {
        setFormData (formData, uploadLength, uploadImgs, images, newBlobList) {
            this.item.uploadImgFormData = formData
            this.item.uploadLength = uploadLength
            this.item.uploadImgs = uploadImgs
            this.item.newBlobList = newBlobList
            this.item.images = images
            let imgList = []
            uploadImgs.forEach(item => {
                imgList.push(item.url)
            })
            this.item.imgList = imgList
        },
        propHide () {
            this.$parent.recordItemPropShow = false
        },
        cancel () {
            if (!this.item.description) {
                this.$vux.toast.text('请输入履职描述')
                return false
            }
            // if (this.uploadImgFormData) {
            //     for (var key of this.uploadImgFormData.keys()) {
            //         this.formData.append(this.item.ID, this.uploadImgFormData.get(key))
            //     }
            // }
            this.addItemFn(this.item)
        },
        getCurrentTime () {
            let newDate = new Date()
            let myyear = newDate.getFullYear()
            let mymonth = newDate.getMonth() + 1
            let myweekday = newDate.getDate()
            if (mymonth < 10) {
                mymonth = `0${mymonth}`
            }
            if (myweekday < 10) {
                myweekday = `0${myweekday}`
            }
            let hours = newDate.getHours()
            let minutes = newDate.getMinutes()
            if (hours < 10) {
                hours = `0${hours}`
            }
            if (minutes < 10) {
                minutes = `0${minutes}`
            }
            return `${myyear}-${mymonth}-${myweekday} ${hours}:${minutes}`
        }
    }
}
</script>
<style scoped>
</style>
